<template>
  <el-card shadow="hover" class="msg-cont">
    <template #header>
      <div class="flex justify-between">
        <el-dropdown>
          <el-button type="info" plain>
            刷新<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>15s</el-dropdown-item>
              <el-dropdown-item>30s</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-button type="primary" plain>竞标开始</el-button>
      </div>
    </template>
     <div class="flex justify-between flex-wrap my-1 ml-1">
      <el-space wrap :size="10">
        <el-input
          v-model="rel_data.params.group_key"
          style="width: 100px"
          placeholder="得标关键字"
          clearable
          @clear="search"
        />
        <el-input
          v-model="rel_data.params.group_name"
          style="width: 100px"
          placeholder="标组名称"
          clearable
          @clear="search"
        />
        <el-button :icon="Search" plain @click="search"></el-button>
        <el-button :icon="RefreshLeft" plain @click="reset"></el-button>
      </el-space>
      </div>
    <el-table :data="rel_data.table" style="width: 100%" class="sale-scroll">
      <el-table-column label="关键字" prop="group_key" />
      <el-table-column label="库存" prop="group_stock" width="60" />
      <el-table-column label="得标数" prop="win_num"width="60"/>
      <el-table-column label="剩余" prop="group_surplus" width="60" />
      <el-table-column fixed="right" label="操作" align="center" width="70">
        <template #default="scope">
          <div v-if="scope.$index==0">
            <el-tooltip effect="dark" content="发送起标线" placement="top">
              <el-button link type="primary" :icon="SortUp"></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="发送结标线" placement="top">
              <el-button link type="danger" :icon="SortDown"></el-button>
            </el-tooltip>
          </div>
          <div v-else>
  
              <el-button link type="primary" :icon="SortUp"></el-button>

   
              <el-button link type="danger" :icon="SortDown"></el-button>
          
          </div>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ArrowDown, SortUp, SortDown,Search,RefreshLeft} from "@element-plus/icons-vue";
import { $getVideo, $getMsg, $sendMsg, $getSales } from "@api/live";
import SceneMsg from "./SceneMsg.vue";
const props = defineProps({
  id: {
    type: String,
    default: "",
  },
});
console.log(222);
console.log(props.id);
const iframeLoading = ref(true);

const rel_data = reactive({
  table: [],
  params: {
    group_name: "",//标组名称
    group_key: "",//标组关键字
    live_id: props.id,
  },
});
onMounted(() => {
  getData();
});

const getData = async () => {
  let res = await $getSales(rel_data.params);
  if (res.code == 0) {
    rel_data.table = res.data.table;
  }
};
const search = () => {
  getData();
};
const reset = () => {
  rel_data.params.group_name='';
  rel_data.params.group_key=''
  getData();
};
const cancelWin = async (index, row) => {
  console.log(row);
};
</script>
<style>
.msg-cont {
  .el-card__body {
    padding: 0;
  }
  .el-table .cell{
    padding:0 8px;
  }
}
.ec2-btncon {
  .el-button {
    margin-bottom: 2px;
    justify-content: flex-start;
  }
  .el-button + .el-button {
    margin-left: 0;
  }
}
</style>
<style scoped lang="scss">
.sale-scroll {
  height: calc(100vh - 166px);
}
.ec2-btncon {
  display: flex;
  flex-direction: column;
}
.primaryColor {
  color: var(--el-color-primary);
}
</style>
